<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.skdesigner-floatrollnonetext,body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body{margin:0;padding:0;font-family:"微软雅黑";}
ul,li{margin:0;padding:0;list-style-type:none;}
img{border:0;}
a{text-decoration:none;}

.mybox{background:green;overflow:auto;height:100%;width:100%;padding-right:30px;}
.mycon{background:yellow;width:90%;}
.myboxcon{overflow:hidden;width:100%;height:100%;}


.skdesigner-floatroll{height:500px;width:14px;background:red;position:absolute;right:0px;top:0;}
.skdesigner-floatroll-sign{width:8px;left:3px;border-radius:10px;height:50px;background:yellow;cursor:pointer;position:absolute;}
</style>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
//////////////////////////////////////////////////////////////////////
//窗口变动

$(window).resize(function(){

var win_h = document.documentElement.clientHeight
$(".mybox").height(win_h)

//盒子roll
myboxroll($(".mybox"),$(".mycon"))
//

/////滚标
signroll($(".mybox"),$(".mycon"))
/////


})
//////////////////////////////////////////////////////////////////////
//加载完成
$(document).ready(function(){


var win_h = document.documentElement.clientHeight

$(".mybox").height(win_h)

//盒子roll
myboxroll($(".mybox"),$(".mycon"))
//

/////滚标
signroll($(".mybox"),$(".mycon"))
/////

//鼠标滚轮


mouseroll($(".mybox"),$(".mycon"),document.getElementById("skdesigner_mybox"))
//
//
})
//////////////////////////////////////////////////////////////////////

//sign滚标函数
function signroll(winbox,wincon){
//
	
	if(wincon.height()<winbox.height()){
		$(".skdesigner-floatroll").hide()		
	}else{
		$(".skdesigner-floatroll").show()		
	}
	var sign_h = parseInt(winbox.height()/wincon.height() * winbox.height());
	
	var win_h = winbox.height();
	var rolly

	//var sign_h = $(".myboxcon").height()/$(".mycon").height() * $(".myboxcon").height()
	$(".skdesigner-floatroll").height(win_h)
	$(".skdesigner-floatroll-sign").height(sign_h)

//
	$(".skdesigner-floatroll").mousedown(function(ev){
		
		var parenty = ev.pageY;
		
		var objtop = winbox.scrollTop()*(winbox.height()/wincon.height())
		
		
		//
		$(document).mousemove(function(e){

			rolly = e.pageY - parenty + objtop
			if( rolly > 0 && rolly < (win_h-sign_h)){
				$(".skdesigner-floatroll-sign").css("top",rolly)
				$(".mybox").scrollTop(rolly*(wincon.height()/winbox.height()))			
			}
			if( rolly < 0){
				$(".skdesigner-floatroll-sign").css("top",0)
				$(".mybox").scrollTop(0)
			}
			if(rolly > (win_h-sign_h)){
				$(".skdesigner-floatroll-sign").css("top",win_h-sign_h)
				$(".mybox").scrollTop((win_h-sign_h)*(wincon.height()/winbox.height()))			
			}
			
		})
		//
		
	
	})
//
	$("html").mouseup(function(){
	
		$(document).unbind();
		
		
	})
//如果鼠标滑出窗口停止事件
//	$("html").mouseout(function(){
//	
//		$(document).unbind();
//		
//		
//	})
//
}
////////////////////

function myboxroll(winbox,wincon){
	var sign_top = winbox.scrollTop()*(winbox.height()/wincon.height())
	$(".skdesigner-floatroll-sign").css("top",sign_top +'px')
	winbox.scroll(function(){
		sign_top = winbox.scrollTop()*(winbox.height()/wincon.height())
		//滚标赋top
		$(".skdesigner-floatroll-sign").css("top",sign_top +'px')
	
	})
}

////////////////////
var sign_topwheel
function myboxrollwheel(winbox,wincon,num){
	 winbox.scrollTop(winbox.scrollTop()+num)
	 sign_topwheel = winbox.scrollTop()*(winbox.height()/wincon.height())

		//滚标赋top
		$(".skdesigner-floatroll-sign").css("top",sign_topwheel +'px')
	
	
}
//
//滚轮事件

function mouseroll(winbox,wincon,objroll){

objroll.onmousewheel = function(event){
	event = event || window.event;
	//console.dir(event);	
	//console.log(event.wheelDelta)
//下滚值-120
		if(event.wheelDelta == -120){
		myboxrollwheel(winbox,wincon,20)
		}
//上滚值120
		if(event.wheelDelta == 120){
		myboxrollwheel(winbox,wincon,-20)
		}
	
};
objroll.addEventListener("DOMMouseScroll", function(event) {
    //console.dir(event);	
	//console.log(event.detail)
//下滚值3
		if(event.detail == 3){
		myboxrollwheel(winbox,wincon,20)
		}
//上滚值-3
		if(event.detail == -3){
		myboxrollwheel(winbox,wincon,-20)
		}
});
}
//
</script>
</head>

<body>


<div class="myboxcon">
<div class="mybox" id="skdesigner_mybox">

	<div class="mycon">
	
		111111111111123<br>1234<br>1235<br>1236<br>1237<br>1238<br>1239<br>1230<br>
		123<br>1234<br>1235<br>1236<br>1237<br>1238<br>1239<br>1230<br>
		123<br>1234<br>1235<br>1236<br>1237<br>1238<br>1239<br>1230<br>
		123<br>1234<br>1235<br>1236<br>1237<br>1238<br>1239<br>1230<br>
		123<br>1234<br>1235<br>1236<br>1237<br>1238<br>1239<br>12307777777777777777
	</div>
	
	
	<div class="skdesigner-floatroll" >
	<div class="skdesigner-floatroll-sign"></div>
	</div>
	

</div>
</div>

</body>
</html>
